export class Option {
    name: String;
    type: String;
    data: Array<number>;
}

/**
 * 对于图表类型，可以使用此类创建需要的Option
 */
export class ChartOptionCreater {

    /**
     * 在图表没有的数据的时候，加载这个option作为默认的显示画面
     */
    public static createInitOption() {
        const option = {

        };
        return option;
    }
    /**
     * 堆跌柱状图
     * @param title 标题
     * @param subTitle 子标题
     * @param unit 单位
     * @param legendData 说明数据 
     * @param xdata x轴数据
     * @param ydata y轴数据
     */
    public static createStackedColumnOption(title: string, subTitle: string, unit: string,
        legendData: Array<any>, xdata: Array<any>, ydata: Array<any>) {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: legendData
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xdata
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: unit,
                    axisLabel: {
                        formatter: '{value}' + unit
                    }
                }
            ],
            series: ydata
        };
        return option;
    }
    public static createScatterChartsOption(title: String, subTitle: String, unit: any, legendData: Array<any>, scatterData: any) {
        let unitName = unit;
        if (unit === '%') {
            unitName = '百分比';
        }
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            title: {
                text: title,
                subtext: subTitle,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            grid: {
                top: '20%',
                left: '1%',
                right: '2%',
                height: '80%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value',
                    min: function (value) {
                        return value.min - 5;
                    },
                    max: function (value) {
                        return value.max + 5;
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: unitName,
                    axisLabel: {
                        formatter: '{value}' + unit
                    }
                }
            ],
            series: [{
                name: 'CT概率分布',
                type: 'scatter',
                label: {
                    emphasis: {
                        show: true,
                        position: 'left',
                        textStyle: {
                            color: 'blue',
                            fontSize: 16
                        }
                    }
                },
                data: scatterData
            }]
        };
        return option;
    }
    /**
   * 构建图表需要的Option
   * @param title 图表标题
   * @param subTitle 图表自标题
   * @param unit 图表y周单位
   * @param color 颜色
   * @param xData x轴数据
   * @param yData y轴数据
   * @param yTargetData 图表里的目标值
   */
    public static createChartsOption(title: String, subTitle: String,
        unit: any, color: any, legendData: Array<any>, xData: any, yData: Array<any>, yTargetData: Array<any>) {
        let unitName = unit;
        if (unit === '%') {
            unitName = '百分比';
        }
        if (yData.length > 0 && yTargetData !== undefined) {
            const targetArray = new Array();
            const l: Option = yData[0];
            const yBean = {
                name: '目标值',
                type: 'line',
                data: yTargetData
            };
            yData.push(yBean);
        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            title: {
                text: title,
                subtext: subTitle,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            legend: {
                data: legendData,
                itemGap: 5
            },
            grid: {
                top: '20%',
                left: '1%',
                right: '6%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xData
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: unitName,
                    axisLabel: {
                        formatter: '{value}' + unit
                    }
                }
            ],
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '80%',
                    showDataShadow: false,
                    left: '93%'
                }
            ],
            series: yData
        };
        return option;
    }

    public static createChartsOptionFta(title: String, subTitle: String,
        unit: any, color: any, legendData: Array<any>, xData: any, yData: Array<any>, yTargetData: Array<any>) {
        let unitName = unit;
        if (unit === '%') {
            unitName = '百分比';
        }
        if (yData.length > 0 && yTargetData !== undefined) {
            const targetArray = new Array();
            const l: Option = yData[0];
            const yBean = {
                name: '目标值',
                type: 'line',
                data: yTargetData
            };
            yData.push(yBean);
        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            title: {
                text: title,
                subtext: subTitle,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            legend: {
                data: legendData,
                itemGap: 5
            },
            grid: {
                top: '20%',
                left: '1%',
                right: '6%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: xData
                }
            ],
            yAxis: [
                {
                    max: 100,
                    min: 'dataMin',
                    type: 'value',
                    name: unitName,
                    axisLabel: {
                        formatter: '{value}' + unit
                    }
                }
            ],
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '80%',
                    showDataShadow: false,
                    left: '93%'
                }
            ],
            series: yData
        };
        return option;
    }
    public static createPieTimeChartsSummary(pieData: { timeLineData: any, name: any, legendData: any, totalData: any, optionsData: any }) {
        const x = new Array();
        pieData.totalData.forEach(element => {
            const label = `${element.name} (${(element.value*100).toFixed(2)})%`;
            x.push(label);
            element.name = label;
        });

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: x
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: pieData.totalData,
                }
            ]
        };

        return option;
    }
    public static createPieTimeCharts(pieData: { timeLineData: any, name: any, legendData: any, totalData: any, optionsData: any }) {
        const option = {
            baseOption: {
                timeline: {
                    axisType: 'category',
                    autoPlay: true,
                    playInterval: 3000,
                    data: pieData.timeLineData
                },
                title: { show: false, text: pieData.name, left: '10', top: '0' },
                tooltip: {
                    // trigger: 'item',
                    // formatter: "{a} <br/>{b}"
                },
                legend: { orient: 'horizontal', x: 'center', y: 'top', data: pieData.legendData },
                calculable: true,
                grid: {
                    left: 30,
                    right: 30,
                    top: 30,
                    bottom: 70
                },
                xAxis: [{ type: 'category', axisLabel: { interval: 0 }, data: ['班次汇总'], splitLine: { show: false } }],
                yAxis: [{ type: 'value', name: '百分比%' }],
                series: [
                    { name: 'Uptime %', type: 'bar' },
                    { name: 'Downtime %', type: 'bar' },
                    { name: 'Toolchange %', type: 'bar' },
                    { name: 'Blocked %', type: 'bar' },
                    { name: 'Starved %', type: 'bar' },
                    { name: '汇总', type: 'pie', center: ['75%', '30%'], radius: '30%', data: pieData.totalData }]
            },
            options: pieData.optionsData,
        }
        return option;
    }
}